<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    
<title>Project: Switch and Meter</title>

    
<link rel="stylesheet" type="text/css" href="CSS/switch_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/meter_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/graph_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/line_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/button_style.css" />

    
<link rel="stylesheet" type="text/css" href="CSS/slider_style.css" />

    
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svg.min.js"></script>
    
<script type="text/javascript" src="jquery.svg.package-1.4.3/jquery.svganim.min.js"></script>

<link href="CSS/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="CSS/appliance_style.css" />
<style type="text/css">@import "CSS\jquery.svg.css";</style>
<script type="text/javascript" src="jquery.svg.js" ></script>
<script type="text/javascript" src="jquery-arrows.js"></script>
<script type="text/javascript" src="device-sounds.js"></script>
<script type="text/javascript" src="arrows-power-consumption.js"></script>
    
<script type="text/javascript">


      $(document).ready( function() {
      
        var KEY_CODE = {};
          KEY_CODE.SPACE = 32;
          KEY_CODE.ENTER = 13;
          KEY_CODE.LEFT = 37;
          KEY_CODE.RIGHT = 39;
      
        //in watts
        var switch2_watts = 193;
        var switch3_watts = 555;
        var switch4_watts = 753;
        
        var total_watts = 1501;

        //show power
        $("h2").text( total_watts + " watts");

      
        $("#switch1_svg").width(300).height(600);
        $("#switch1_svg").svg();
        $("#switch2_svg").width(300).height(600);
        $("#switch2_svg").svg();
        $("#switch3_svg").width(300).height(600);
        $("#switch3_svg").svg();
        $("#switch4_svg").width(300).height(600);
        $("#switch4_svg").svg();
      
        var switch1_wrapper = $("#switch1_svg").svg('get');
        $("#switch1_svg").attr("class", "switch");
        switch1_wrapper.load("SVG/switch.svg",
          {
            //onLoad: onLoad
          }
        );
        
        var switch2_wrapper = $("#switch2_svg").svg('get');
        $("#switch2_svg").attr("class", "switch");
        switch2_wrapper.load("SVG/switch.svg",
          {
            //onLoad: onLoad
          }
        );
        
        var switch3_wrapper = $("#switch3_svg").svg('get');
        $("#switch3_svg").attr("class", "switch");
         switch3_wrapper.load("SVG/switch.svg",
          {
            //onLoad: onLoad
          }
        );
        
        var switch4_wrapper = $("#switch4_svg").svg('get');
        $("#switch4_svg").attr("class", "switch");
        switch4_wrapper.load("SVG/switch.svg",
          {
            onLoad: onLoad
          }
        );        
        //$("div#switch4_svg").children("svg").children("g#meter").attr("","")
 
        
        $("#meter_svg").width(300).height(300);
        $("#meter_svg").svg();
        var meter_wrapper = $("#meter_svg").svg('get');
        
        meter_wrapper.load("SVG/meter.svg",
          {
            onLoad: meter_onLoad
          }
        );
        
        $("#graph_svg").width(800).height(1200);
        $("#graph_svg").svg();
        var graph_wrapper = $("#graph_svg").svg('get');
        
        graph_wrapper.load("SVG/circle.svg",
          {
           onLoad: null
           }
        );
 
        $("#watts_svg").width(300).height(50);
        $("#watts_svg").svg();
        var watts_wrapper = $("#watts_svg").svg('get');
        
        watts_wrapper.load("SVG/meter_watts.svg",
          {
           onLoad: null
           }
        );
        $("#bill_svg").width(300).height(50);
        $("#bill_svg").svg();
        var bill_wrapper = $("#bill_svg").svg('get');
        
        bill_wrapper.load("SVG/meter_bill.svg",
          {
           onLoad: null
           }
        ); 
        
        $("#start_time_button").width(200).height(50);
        $("#start_time_button").svg();
        var start_wrapper = $("#start_time_button").svg('get');
        
        start_wrapper.load("SVG/start_time_button.svg",
          {
           onLoad: null
           }
        );              

        $("#pause_time_button").width(200).height(50);
        $("#pause_time_button").svg();
        var pause_wrapper = $("#pause_time_button").svg('get');
        
        pause_wrapper.load("SVG/pause_time_button.svg",
          {
           onLoad: null
           }
        ); 
        
        $("#reset_time_button").width(200).height(50);
        $("#reset_time_button").svg();
        var reset_wrapper = $("#reset_time_button").svg('get');
        
        reset_wrapper.load("SVG/reset_time_button.svg",
          {
           onLoad: button_onLoad
           }
        ); 
        
        $("#bill_slider_svg").width(1000).height(150);
        $("#bill_slider_svg").svg();
        var slider_wrapper = $("#bill_slider_svg").svg('get');
        
        slider_wrapper.load("SVG/bill_slider.svg",
          {
           onLoad: slider_onLoad
           }
        ); 
        //setTimeout("alert2()",1000);
        
        //setTimeout( function() { alert("correct?"); }, 1000);
  
        //if this is true, all animation stops
        var pause_flag = false;
  
        var move_graph = function(){ 
          var lines = $("#graph_svg").children("svg").children("g#lines");
          var temp;
          //update each line with next power
          lines.children().each( function() {
            if ($(this).attr("id") != "40"){
              $(this).attr("y1", lines.children("line#" + (parseInt($(this).attr("id"))+1)).attr("y1"));
            }
            
           } //end function
          ); //end each function on children
       
          lines.children("line#40").attr("y1", 500-(total_watts/1501*500) );
          
          if ( pause_flag == false ){
            setTimeout(move_graph, 1000);
          }
        }
          
        setTimeout( move_graph, 1000);
        
        var watts_value = 0
        var bill_value = 0
        
        var move_meter_text = function(){
        
          var total_kw = total_watts/1000;
          var kwh_svg = $("#watts_svg").children("svg").children("#power");
          var bill_svg = $("#bill_svg").children("svg").children("#bill");
          
          //var text = kwh_svg.text();
          //var watts_now  = parseFloat(text.substr(0, text.length-3))
          
          //this function is called every 50ms
          total_kw /=20;
          
          watts_value += total_kw;
          
          //need to take off numbers after 2digits
          var watts_text = watts_value.toString(10);
          watts_text = watts_text.substr(0,5);
          
          kwh_svg.text( watts_text + " kWh");
          
          //take the value of bill from the thumb of the slider
          var $thumb = $("div#bill_slider_svg").children("svg").children("g").children("rect#thumb");
          var valuenow = parseInt($thumb.attr("x"));
          valuenow = calculate_cost( valuenow);
          
          bill_value += total_kw * valuenow;
          var bill_text = bill_value.toString(10);
          if (bill_value > 10 ){
            bill_text = bill_text.substr(0,5);
          } else {
            bill_text = bill_text.substr(0,4);
          }
          bill_svg.text( "Bill: $" + bill_text );
          
          if (pause_flag == false){
            setTimeout( move_meter_text, 50);          
          }
        
        }
        setTimeout( move_meter_text, 50);

   
        function onLoad(){
      
          //adjust to original angle for switch
          $("#switch2_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35)");
          $("#switch3_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35)");
          $("#switch4_svg").children("svg").children("g#switch1").attr("transform", "rotate(-35)");
 
       
          $("div.switch").keydown( function(event) {
          
            if ( event.keyCode == KEY_CODE.SPACE || event.keyCode == KEY_CODE.ENTER ) {

              //var for the switch
              var $switch_svg = $(this).children("svg").children("g#switch1");
              //var for the meter movement
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
   
              if( $(this).attr("aria-checked") == "true"){
          
                $(this).attr("aria-checked", "false");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)+30) +")"}, 1000);  
               
                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
                  total_watts = 0;
                  $("h2").text( total_watts + "watts");
		  switch1Toggle(false);
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch2_watts;
		    switch2Toggle(false);
                  }
                  $("h2").text( total_watts + "watts");
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch3_watts;
		    switch3Toggle(false);
                  }
                  $("h2").text( total_watts + "watts");
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts -= switch4_watts;
		    switch4Toggle(false);
                  }
                  $("h2").text( total_watts + "watts");
                }
                
              } else {
                $(this).attr("aria-checked", "true");
                //transform_string should be rotate(xx)
                var transform_string = $switch_svg.attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $switch_svg.animate( {svgTransform: "rotate(" + (parseInt(transform_string)-30) +")"}, 1000);  

                //changes the values of the power
                if ( $(this).attr("id") == "switch1_svg"){
		switch1Toggle(true);
                  if ( $("#switch2_svg").attr("aria-checked") == "true"){
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                  if ( $("#switch3_svg").attr("aria-checked") == "true"){
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                  if ( $("#switch4_svg").attr("aria-checked") == "true"){
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
                  $("h2").text( total_watts + "watts");
                }
                if ( $(this).attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch2_watts;
		    switch2Toggle(true);
                  }
                  $("h2").text( total_watts + "watts");
                }
                if ( $(this).attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch3_watts;
		    switch3Toggle(true);
                  }
                  $("h2").text( total_watts + "watts");
                }
                if ( $(this).attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true") {
                    total_watts += switch4_watts;
		    switch4Toggle(true);
                  }
                  $("h2").text( total_watts + "watts");
                }
              } // end if  

              //after the total power changed, change the rate on meter
              if (pause_flag == false){
                change_meter_rate( $movement, calculate_rate(total_watts)); 
              }
            } //end if (check SPACE and ENTER)
          
            } //end function
          ); //end keydown function
        
          $("div.switch").children("svg").children("g#switch1").click ( function(event) {
              
              //parent stores the div element of the switch
              var $parent = $(this).parent().parent();
              //meter to change the rate of the ball
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
        
              if( $parent.attr("aria-checked") == "true"){
              
                $parent.attr("aria-checked", "false");
                //transform_string should be rotate(xx)
                var transform_string = $(this).attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $(this).animate( {svgTransform: "rotate(" + (parseInt(transform_string)+30) +")"}, 1000);  
                
                //changes the value of the power
                if ( $parent.attr("id") == "switch1_svg"){
                  //make the meter stop
                  total_watts = 0;
                  $("h2").text( total_watts + " watts");
                }
                if ( $parent.attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                   total_watts -= switch2_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } 
                if ( $parent.attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                   total_watts -= switch3_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } 
                if ( $parent.attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                   total_watts -= switch4_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } //end if
                
              } else {
                $parent.attr("aria-checked", "true");
                //transform_string should be rotate(xx)
                var transform_string = $(this).attr("transform");
                //take out the number of degrees
                transform_string = transform_string.substring(7,transform_string.length-1);
                $(this).animate( {svgTransform: "rotate(" + (parseInt(transform_string)-30) +")"}, 1000);  

                //changes the value of the power
                if ( $parent.attr("id") == "switch1_svg"){
                  if ( $("#switch2_svg").attr("aria-checked") == "true"){
                    total_watts += switch2_watts;
                  }
                  if ( $("#switch3_svg").attr("aria-checked") == "true"){
                    total_watts += switch3_watts;
                  }
                  if ( $("#switch4_svg").attr("aria-checked") == "true"){
                    total_watts += switch4_watts;
                  }                   
                  $("h2").text( total_watts + " watts");
                }
                if ( $parent.attr("id") == "switch2_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                    total_watts += switch2_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } 
                if ( $parent.attr("id") == "switch3_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                    total_watts += switch3_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } 
                if ( $parent.attr("id") == "switch4_svg"){
                  if ( $("#switch1_svg").attr("aria-checked") == "true"){
                   total_watts += switch4_watts;
                  }
                  $("h2").text( total_watts + " watts");
                } //end if
              } // end if  
              
              if (pause_flag == false) {
                change_meter_rate( $movement, calculate_rate(total_watts));
              } 

            } //end function
          ); //end click function
        
        }
        
       function button_onLoad(){

          $("div#start_time_button").click( function(event) {
          
            if (pause_flag == true) {
              pause_flag = false;

              //move the meter
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
              change_meter_rate( $movement, calculate_rate(total_watts));
            
              //restart the timeout functions
              move_graph();
              move_meter_text();
            
            } // end if 
          
            } //end function
          ); //end click
         
        
       
          $("div#pause_time_button").click( function(event) {
          
            if (pause_flag == false) {
         
              pause_flag = true;
            
              //stop the meter animation
              var $movement = $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement");
              change_meter_rate( $movement, 0); 

            } // end if 
         
           } // end function
         ); //end click
       
         $("div#reset_time_button").click( function(event) {
         
             watts_value = 0;
             bill_value = 0;
             
             //if it is paused, value would not be updated so update
             var kwh_svg = $("#watts_svg").children("svg").children("#power");
             var bill_svg = $("#bill_svg").children("svg").children("#bill");
            
             kwh_svg.text( "0.0 kWh");
             bill_svg.text( "Bill: $0.00");
             
             //initialize each line of the graph
             var lines = $("#graph_svg").children("svg").children("g#lines");
             //update each line with next power
             lines.children().each( function() {
               $(this).attr("y1", 0);
               } //end function
             ); //end each function on children
         
         
           } // end function
         ); //end click
              
       } // end button_onLoad function
   
       function meter_onLoad(){
       
         //set the rate as starting rate
         change_meter_rate( $("div#meter_svg").children("svg").children("g#meter").children("g#meter_movement"), calculate_rate(total_watts)); 

  /*                
          $("g#meter").click ( function() {
          
              var movement = $("g#meter").children("g#meter_movement");
              if( switch1_isClosed == true ){
                 //alert("true");             
                              
                //get each children and stop or start the animation
                movement.children().each( function() {
                  var node = $(this);
                  var animation = node.children();
                  animation.attr("dur", "6s");
                 } //end function
                ); //end each function on children
                
                //var nodes = $(movement).children();
                //odes.setAttribute("id", "yes");
              
              } else {
              
       
                //alert("false");
                //get each children and stop or start the animation
                movement.children().each( function() {
                  var node = $(this);
                  var animation = node.children();
                  animation.attr("dur", "0s");
                 } //end function
                ); //end each function on children
                
              } //end else
              
            } //end function
          ); //end click function
    */        
        } //end meter_onLoad function


  
        function calculate_rate ( power){
          if (power == 0){
            return 0;
          }
          return 1/power*300;
        }

        function change_meter_rate ( $movement, rate ) {
        
          $movement.children().each( function() {
            var node = $(this);
            var animation = node.children();
            animation.attr("dur", rate + "s");
            
            //calculate the starting time
            var count = parseInt(animation.attr("count"));
            animation.attr("begin", rate/8*count + "s");
            
           } //end function
          ); //end each

        } //end change_meter_rate function
        
        
        function slider_onLoad(){
        
            $("div#bill_slider_svg").keydown( function(event) {
          
              var $thumb = $("div#bill_slider_svg").children("svg").children("g").children("rect#thumb");
 
              if ( event.keyCode == KEY_CODE.LEFT ){
               
                var thumb_valuenow = parseInt($thumb.attr("x"));  
                thumb_valuenow -= 10;
                
                if (20 > thumb_valuenow ){
                  thumb_valuenow = 20
                }
                
                $thumb.attr("x", thumb_valuenow);  
            
              } // endif
              
              if ( event.keyCode == KEY_CODE.RIGHT ){
                
                var thumb_valuenow = parseInt($thumb.attr("x"));  
                thumb_valuenow += 10;
                
                //max width of slider - width of thumb = 530
                if (thumb_valuenow > 530){
                  thumb_valuenow = 530;
                }
                
                $thumb.attr("x", thumb_valuenow); 
                          
              
              } // endif            
              
              var valuenow = parseInt($thumb.attr("x"));
              valuenow = calculate_cost( valuenow);
              var valuenow_text= valuenow.toString(10);
              if (valuenow > 10){
                valuenow_text = valuenow_text.substr(0,4);
              } else{
                valuenow_text = valuenow_text.substr(0,3);
              }      
            
              $("div#bill_cost_text").text( "Cost of electricity: " + valuenow_text + " cents per kWh");
              
            } //end function
            
     

            
          ); //end keydown function
        } //end slider_onLoad
       
        
        function calculate_cost( slider_value ) {
        
          //10 cents per kWh
          var max_cost = 10;
          
          //actual value out of 530
          var actual_value = slider_value - 20;
          
          var amount = actual_value / 510 * max_cost;
          
          return amount;
        
        } //end function
        
        
        } //end function
      ); //end ready
    
    
    </script>
  </head>
<body>
    
<h1> Switch test </h1>

    
<h2> </h2>

    
<div class="switch" id="switch1_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch2_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch3_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="switch" id="switch4_svg" tabindex="0" role="checkbox" aria-checked="true"> </div>

    
<div class="meter" id="meter_svg" aria-activedescendent="power" role="list"> </div>

    
<div class="meter" id="watts_svg"> </div>

    
<div class="meter" id="bill_svg"> </div>

    
<div class="button" id="start_time_button" role="checkbox" aria-checked="true"> </div>

    
<div class="button" id="pause_time_button" role="checkbox" aria-checked="false"> </div>

    
<div class="button" id="reset_time_button"> </div>

    
<div class="bill_slider" id="bill_cost_text">Cost of electricity:
      5.0 cents per kWh</div>

    
<div class="bill_slider" tabindex="0" id="bill_slider_svg" role="slider" aria-valuemin="20" aria-valuemax="620" aria-valuenow="310"> </div>


<div id="appliance1"><img src="img/vacuum.png"/></div>

<div id="appliance2"><img src="img/hairdryer.png"/></div>

<div id="appliance3"><img src="img/dishwasher.png"/></div>

<div id="transmission_tower"><img src="img/transmissiontower.png"/></div>

<!--<div class="power_line" id="arrow_svg"> </div>-->
<div id="arrow_svg"> </div>

    
<div class="graph" id="graph_svg"> </div>

  </body>
</html>